<template>
  <div class="stbox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-header>
        <!-- 搜索，切换 -->
        <el-form :inline="true" :model="formInline" class="user-search">
<!--          <el-form-item label="按时间范围">-->
<!--            <el-date-picker v-model="formInline.datearea" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">-->
<!--            </el-date-picker>-->
<!--          </el-form-item>-->
          <el-form-item label="停车场">
            <el-select size="small" v-model="formInline.plId" placeholder="请选择">
              <el-option  v-for="type in parkings" :label="type.plName" :value="type.plId" :key="type.plName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-container>
        <el-main >
          <el-divider content-position="left" ><h1 style="color: #ff2026">统计平台：统计当年 {{time}} 年订单数据</h1></el-divider>
          <el-backtop target=".page-component__scroll .el-scrollbar__wrap"></el-backtop>
          <div id="main" style="width: 600px;height:400px;"></div>
        </el-main>
        <el-main>
          <el-divider content-position="left"><h1>详细信息</h1></el-divider>
          <div id="child" style="width: 600px;height:400px;" >
            <table :data="data1.source" id="table-6" style="border: 2px">
              <tr  v-for="u in this.data1.source"  width="100%">
                <td v-for="uu in u" >
                  {{uu}}
                </td>
              </tr>
            </table>
          </div>
        </el-main>
      </el-container>
    </el-container>




  </div>
</template>

<script>

import {ParkingOrderList, statistic1, statistic2, ParkingLots} from "../../api/payMG";
import Time from "vue-router";

export default {
  name: 'echartsTest',
  components: {},
  data(){
    return{
      time:null,
      data1:{
        source: null,
        series: null,
      },
      formInline:{
        datearea: '',
      },
      parkings:[],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  mounted() {
    this.statistic2();
  },
  created() {
    let date = new Date();
    this.time=date.getFullYear();
    ParkingLots().then(result=>{
      if(result.code==0){
        this.parkings.push({plId:'',plName:"查询全部"})
        for (let i = 0; i < result.data.length; i++) {
          this.parkings.push(result.data[i])
        }
        console.log(result.data)
      }else {
        this.$message({
          type: 'info',
          message: result.msg
        })
      }
    })
  },
  watch: {

    formInline: {

      handler:function() {   //特别注意，不能用箭头函数，箭头函数，this指向全局
        this.statistic2();
      },
      deep: true    //深度监听
    }
  },

  methods: {

    // 搜索事件
    search() {
      console.log("----",this.formInline)
      this.getdata(this.formInline)
    },
    getdata(parameter) {
      this.statistic2(parameter);
    },

    onExample() {
      // 基于准备好的dom，初始化echarts实例
      let myChart  = this.$echarts.init(document.getElementById('main'));
      // 指定图表的配置项和数据

      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];

      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },

        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };

      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
        },
        dataset: {
          source: this.data1.source
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.data1.series
      };
 /*     let option = {
        legend: {},
        tooltip: {},
        dataset: {
          //提供一份数据。
          // source: [
          //   ['product', '已支付', '待支付',"订单总数"],
          //   ['1号停车场', 6, 4 , 10],
          //   ['2号停车场', 2, 1 , 3],
          // ]
          source: this.data1.source
        },
        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
        xAxis: { type: 'category' },
        // 声明一个 Y 轴，数值轴。
        yAxis: {},
        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
        // series: [{ type: 'bar' }, { type: 'bar' } ,{ type: 'bar' }]
        series: this.data1.series
      };*/
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    statistic2(parameter){
      statistic2(parameter).then(result=>{
        if(result.code==0){
          console.log("=============",result.data)
            /**
             * ['product', '已支付', '待支付',"订单总数"],
             ['1号停车场', 6, 4 , 10],
             ['2号停车场', 2, 1 , 3],
               4 ' ' 1 ' ' 0
               1 ' ' 2 ' ' 0
               6 ' ' 1 ' ' 1
               2 ' ' 2 ' ' 1
             */
            let data=result.data;
            this.data1=[];
            this.data1.source=[];
            this.data1.series=[];
            let strSeries=[];
          for (let i = 0; i < 3; i++) {
              strSeries.push({ type: 'bar' });
          }
            this.data1.series=strSeries;
            this.data1.source=data;
          console.log("-----",this.data1.series)
          console.log("+++++++",this.data1.source)
            this.onExample();
          }else {
          this.$message({
            type: 'info',
            message: result.msg
          })
        }
      })
    },
  }
}
</script>
<style scoped>
/* Table Head */
#table-6 thead th {
  background-color: rgb(128, 102, 160);
  color: #fff;
  border-bottom-width: 0;
  border-width: 1px;
}

/* Column Style */
#table-6 td {
  border-width: 1px;
  color: #000;
}
/* Heading and Column Style */
#table-6 tr, #table-6 th {
  border-width: 1px;
  border-style: solid;
  border-color: rgb(128, 102, 160);
}

/* Padding and font style */
#table-6 td, #table-6 th {
  padding: 5px 10px;
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
  border-width: 1px;
}
.stbox {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.stbgc {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  border-radius: 5px;
  padding: 0px 16px;
}
</style>
